<%--
  Created by IntelliJ IDEA.
  User: 20064
  Date: 2020/2/13
  Time: 9:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>航班查询</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 图标 -->
    <link rel="icon" type="image/png" sizes="144x144" href="../images/airplane.png"/>
    <link rel="apple-touch-icon" type="image/png" sizes="144x144" href="../images/airplane.png"/>
    <link href="../js/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 其他 -->
    <link rel="stylesheet" href="../js/bootstrap-4.4.1-dist/css/bootstrap.min.css">

    <!-- js -->
    <script type="text/javascript" src="../js/jquery-3.4.1/jquery-3.4.1.js"></script>
    <script type="text/javascript">

    </script>
    <style type="text/css">
        .row {
        }

        h3 {
            display: block;
        }

        .result {
            width: 100%;
        }

        button {
            margin-top: -8px;
        }

        .title {
            color: gray;
        }
    </style>

</head>
<body>

<div class="container">
    <div class="row">
        <div class="w-100">
            <h1 class="display-4 title" style="display: inline-block">查询航班结果：</h1>
            <button class="btn btn-warning float-right" type="button" onclick="goBack()" style="margin-right: 80px;">
                返回上一页
            </button>
        </div>
        <div class="shadow-lg result">
            <table class="table text-center table-hover">
                <thead>
                <tr>
                    <th>航班ID</th>
                    <th>出发地</th>
                    <th>目的地</th>
                    <th>出发时间</th>
                    <th>到达时间</th>
                    <th>预定</th>
                </tr>
                </thead>
                <tbody>
                <c:if test="${flightList==null || flightList.size()==0}">
                    <tr>
                        <td colspan="6">暂没有航班</td>
                    </tr>
                </c:if>
                <c:forEach items="${flightList}" var="flight">
                    <tr>
                        <td>${flight.flightId}</td>
                        <td>${flight.flightStartArea.cityName}</td>
                        <td>${flight.flightEndArea.cityName}</td>
                        <td>${flight.flightStartTime}</td>
                        <td>${flight.flightEndTime}</td>
                        <td>
                            <button class="btn btn-success" type="button" onclick="book(${flight.flightId})">预定</button>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">&nbsp;</div>
    <div class="row border-bottom"></div>
    <div class="row">&nbsp;</div>
    <div class="row">
        <h1 class="display-4 title">其他日期推荐：</h1>
        <div class="shadow-lg result">
            <table class="table text-center table-hover">
                <thead>
                <tr>
                    <th>航班ID</th>
                    <th>出发地</th>
                    <th>目的地</th>
                    <th>出发时间</th>
                    <th>到达时间</th>
                    <th>预定</th>
                </tr>
                </thead>
                <tbody>
                <c:if test="${otherFlightList==null || otherFlightList.size()==0}">
                    <tr>
                        <td colspan="6">暂没有航班</td>
                    </tr>
                </c:if>
                <c:forEach items="${otherFlightList}" var="flight">
                    <tr>
                        <td>${flight.flightId}</td>
                        <td>${flight.flightStartArea.cityName}</td>
                        <td>${flight.flightEndArea.cityName}</td>
                        <td>${flight.flightStartTime}</td>
                        <td>${flight.flightEndTime}</td>
                        <td>
                            <button class="btn btn-success" type="button" onclick="book(${flight.flightId})">预定</button>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">&nbsp;</div>
    <div class="row border-bottom"></div>
    <div class="row">&nbsp;</div>
    <div class="row">
        <h1 class="display-4 title">中转航班推荐：</h1>
        <div class="shadow-lg result">
            <table class="table text-center table-hover">
                <thead>
                <tr>
                    <th>出发地</th>
                    <th>
                        <mark>转</mark>
                    </th>
                    <th>目的地</th>
                    <th>出发时间</th>
                    <th>到达时间</th>
                    <th>预定</th>
                </tr>
                </thead>
                <tbody>
                <c:if test="${mapList==null || mapList.size()==0}">
                    <tr>
                        <td colspan="6">暂没有航班</td>
                    </tr>
                </c:if>
                <c:forEach items="${mapList}" var="map">
                    <tr>
                        <td>${map.get("flightStartArea")}</td>
                        <td>${map.get("flightChangeArea")}</td>
                        <td>${map.get("flightEndArea")}</td>
                        <td>${map.get("flightStartTime")}</td>
                        <td>${map.get("flightEndTime")}</td>
                        <td>
                            <button class="btn btn-success" type="button"
                                    onclick="bookChange(${map.get("flightStartId")},${map.get("flightEndId")})">预定
                            </button>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>

</div>

</body>

<script type="text/javascript" src="../js/bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
    function book(id) {
        location.href = "bookFlight.do?flightId1=" + id;
    }

    function bookChange(id1, id2) {
        location.href = "bookFlight.do?flightId1=" + id1 + "&flightId2=" + id2;
    }

    function goBack() {
        location.href = "getHotCity.do";
    }

</script>
</html>
